<template>
  <div>
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="16" :xs="24">
        <el-card shadow="never">
          <el-row :gutter="24">
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_register.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.registrationNumber }}</div>
                  <div class="text">{{ $t('注册数') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_order.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.inputNmber }}</div>
                  <div class="text">{{ $t('进件数总计') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_new_order.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.newInputNmber }}</div>
                  <div class="text">{{ $t('新客进件数量') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_old_order.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.oldInputNmber }}</div>
                  <div class="text">{{ $t('老客进件数量') }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-top: 30px">
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_pass.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.pass }}</div>
                  <div class="text">{{ $t('终审通过订单') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_close.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.close }}</div>
                  <div class="text">{{ $t('终审关闭订单') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_refuse.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.refuse }}</div>
                  <div class="text">{{ $t('终审拒绝订单') }}</div>
                </div>
              </div>

            </el-col>
            <el-col :span="6" :xs="12">
              <div class="col_item flex_center">
                <img class="item_icon " src="../../../assets/home_wait.png">
                <div style="margin-left: 10px">
                  <div class="value">{{ statisticsData.waitAudit }}</div>
                  <div class="text">{{ $t('终审待审核订单') }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-card shadow="never">
          <template slot="header">
            <span> {{ $t('通过率') }}</span>
            <i style="color: #BEBEBE ;font-size: 22px;float: right" class="el-icon-refresh cursor_pointer "
               :class="{'refresh_rotate':todayData_flag}"
               @click="todayChange"></i>
          </template>
          <el-row :gutter="24" class="flex_center" style="justify-content: space-around">
            <el-col :span="12" style="margin-right: 10px">
              <div class="flex_center rate_box" style="justify-content: center;background-color: #FFF5E8;">
                <div style="margin-right: 10px">
                  <img class="pass_rate_icon" src="../../../assets/home_machine.png">
                </div>
                <div>
                  <div class="rate_active" style="color: #F9B13A">{{ statisticsData.machinePassRate }}</div>
                  <div class="rate_text"> {{ $t('机审通过率') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex_center rate_box" style="justify-content: center;background-color: #ECF7FD;">
                <div style="margin-right: 10px">
                  <img class="pass_rate_icon" src="../../../assets/home_verify.png">
                </div>
                <div>
                  <div class="rate_active" style="color: #48AEFC">{{ statisticsData.auditPassRate }}</div>
                  <div>
                    <span class="rate_text">
                      {{ $t('终审通过率') }}
                    </span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin: 15px 0 0 0;">
      <el-col :span="12" :xs="24">
        <el-card shadow="never">
          <template slot="header">
            <span>{{ $t('打款订单') }}</span>
            <i style="color: #BEBEBE ;font-size: 22px;float: right"
               :class="{'refresh_rotate':todayPay_flag}"
               @click="todayPayChange"
               class="el-icon-refresh cursor_pointer"></i>
          </template>
          <Table :page="false" border :table-data="paymentData" :header-style="{backgroundColor:'#fffbed'}">
            <el-table-column prop="name" align="center" :label="$t('名称')"/>
            <el-table-column prop="pay" align="center" :label="$t('待打款')"/>
            <el-table-column prop="new" align="center" :label="$t('新客已打款')"/>
            <el-table-column prop="old" align="center" :label="$t('老客已打款')"/>
            <el-table-column prop="total" align="center" :label="$t('总计已打款')"/>
          </Table>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card shadow="never">
          <template slot="header">
            <span> {{ $t('未到期订单结清') }}</span>
            <i style="color: #BEBEBE ;font-size: 22px;float: right"
               :class="{'refresh_rotate':todayNotSettle_flag}"
               @click="todayNotSettleChange"
               class="el-icon-refresh cursor_pointer"></i>
          </template>
          <Table :page="false" border :table-data="orderSettleData" :header-style="{backgroundColor:'#fffbed'}">
            <el-table-column prop="name" align="center" :label="$t('名称')"/>
            <el-table-column prop="settle" align="center" :label="$t('结清')"/>
            <el-table-column prop="defer" align="center" :label="$t('展期')"/>
          </Table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin: 15px 0 0 0;">
      <el-col :span="12" :xs="24">
        <el-card shadow="never">
          <template slot="header">
            <span> {{ $t('应还订单') }}</span>
            <i style="color: #BEBEBE ;font-size: 22px;float: right"
               :class="{'refresh_rotate':todayShould_flag}"
               @click="todayShouldChange"
               class="el-icon-refresh cursor_pointer"></i>
          </template>
          <Table :page="false" border :table-data="shouldOrderData" :header-style="{backgroundColor:'#fffbed'}">
            <el-table-column prop="name" align="center" :label="$t('名称')"/>
            <el-table-column prop="should" align="center" :label="$t('应还')"/>
            <el-table-column prop="settle" align="center" :label="$t('结清')"/>
            <el-table-column prop="defer" align="center" :label="$t('展期')"/>
            <el-table-column prop="wait" align="center" :label="$t('待还')"/>
          </Table>
          <el-row :gutter="24" style="margin: 30px 0 0 0">
            <el-tabs @tab-click="rateChange" v-model="activeName">
              <el-tab-pane :label="$t('首逾率')" name="overdue"></el-tab-pane>
              <el-tab-pane :label="$t('还款率')" name="settle"></el-tab-pane>
              <el-col :span="12" :xs="24">
                <div class="flex_center" style="justify-content: center">
                  <el-progress type="circle" :width="95" :stroke-width="10" color="#FF9F23" stroke-linecap="butt"
                               :percentage="statisticsData.settleOverdueRate || 0"></el-progress>
                  <span class="should_text">{{ activeName === 'overdue' ? $t('结清首逾率') : $t('结清还款率') }}</span>
                </div>
              </el-col>
              <el-col :span="12" :xs="24">
                <div class="flex_center" style="justify-content: center">
                  <el-progress type="circle" :width="95" :stroke-width="10" stroke-linecap="butt"
                               :percentage="statisticsData.deferSettleOverdueRate || 0 "></el-progress>
                  <span class="should_text">{{ activeName === 'overdue' ? $t('展期+结清首逾率') : $t('展期+结清还款率') }}</span>
                </div>
              </el-col>
            </el-tabs>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card shadow="never">
          <template slot="header">
            <span> {{ $t('入催订单') }}</span>
            <i style="color: #BEBEBE ;font-size: 22px;float: right"
               :class="{'refresh_rotate':todayOverdue_flag}"
               @click="todayOverdueChange"
               class="el-icon-refresh cursor_pointer"></i>
          </template>
          <Table :page="false" border :table-data="collectionOrderData" :header-style="{backgroundColor:'#fffbed'}">
            <el-table-column prop="name" align="center" :label="$t('名称')"/>
            <el-table-column prop="add" align="center" :label="$t('新增入催')"/>
            <el-table-column prop="settle" align="center" :label="$t('入催结清')"/>
            <el-table-column prop="part" align="center" :label="$t('部分还款')"/>
            <el-table-column prop="unPay" align="center" :label="$t('未还款')"/>
          </Table>
        </el-card>
        <el-card style="margin-top: 10px" shadow="never">
          <template slot="header">
            {{ $t('合计结清') }}
          </template>
          <div class="flex_center">
            <img src="../../../assets/home_amount.png"/>
            <span style="font-size: 14px;color: #999999;margin:0 5px">{{ $t('合计总金额') }} ：</span>
            <span style="color: #FB903E;font-size: 18px;margin-right: 10px">{{ statisticsData.settleAmount }}</span>
            <span style="font-size: 14px;color: #999999;margin:0 5px">{{ $t('合计笔数') }} ：</span>
            <span style="color: #FB903E;font-size: 18px;">{{ statisticsData.settle }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import {
  fetchHomeTodayDataStatistics,
  todayNotSettleData,
  todayOverdueData,
  todayPayData,
  todayShouldData
} from "@/api/system";

export default {
  props: ['params'],
  data() {
    return {
      statisticsData: {},
      paymentData: [],
      orderSettleData: [],
      shouldOrderData: [],
      collectionOrderData: [],
      todayData_flag: false,
      todayPay_flag: false,
      todayOverdue_flag: false,
      todayNotSettle_flag: false,
      todayShould_flag: false,
      activeName: 'overdue'
    }
  },
  watch: {
    statisticsData(value) {
      const {
        newPayAmount,
        oldPayAmount,
        payAmount,
        newPay,
        oldPay,
        pay,
        unexpiredDefer,
        unexpiredSettle,
        unexpiredSettleAmount,
        expireShould,
        expireShouldAmount,
        expireWait,
        expireWaitAmount,
        defer,
        overdueSettle,
        overdueSettleAmount,
        newOverdue,
        newOverdueAmount,
        overduePartRefund,
        overduePartRefundAmount,
        overdueNotRefundAmount,
        overdueNotRefund,
        expireRefund,
        expireRefundAmount,
        waitPay,
        waitPayAmount
      } = value
      this.paymentData = [
        {name: this.$t('笔数'), new: newPay, old: oldPay, total: pay, pay: waitPay},
        {name: this.$t('金额'), new: newPayAmount, old: oldPayAmount, total: payAmount, pay: waitPayAmount},
      ]
      this.orderSettleData = [
        {name: this.$t('笔数'), settle: unexpiredSettle, defer: unexpiredDefer,},
        {name: this.$t('金额'), settle: unexpiredSettleAmount, defer: '/',},
      ]
      this.shouldOrderData = [
        {name: this.$t('笔数'), settle: expireRefund, defer: defer, should: expireShould, wait: expireWait},
        {
          name: this.$t('金额'),
          settle: expireRefundAmount,
          defer: '/',
          should: expireShouldAmount,
          wait: expireWaitAmount
        },
      ]
      this.collectionOrderData = [
        {
          name: this.$t('笔数'),
          add: newOverdue,
          settle: overdueSettle,
          part: overduePartRefund,
          unPay: overdueNotRefund
        },
        {
          name: this.$t('金额'),
          add: newOverdueAmount,
          settle: overdueSettleAmount,
          part: overduePartRefundAmount,
          unPay: overdueNotRefundAmount
        },
      ]
    }
  },
  methods: {
    async todayChange() {
      this.todayData_flag = true
      await this.todayDataStatistics()
      this.todayData_flag = false
    },
    async todayPayChange() {
      this.todayPay_flag = true
      await this.todayPayData()
      this.todayPay_flag = false
    },
    async todayOverdueChange() {
      this.todayOverdue_flag = true
      await this.todayOverdueData()
      this.todayOverdue_flag = false
    },
    async todayNotSettleChange() {
      this.todayNotSettle_flag = true
      await this.todayNotSettleData()
      this.todayNotSettle_flag = false
    },
    async todayShouldChange() {
      this.todayShould_flag = true
      await this.todayShouldData()
      this.todayShould_flag = false
    },
    // 获取今日数据
    todayDataStatistics() {
      return fetchHomeTodayDataStatistics(this.params).then(res => {
        if (res.code === 1) {
          const {
            registrationNumber,
            inputNmber,
            newInputNmber,
            oldInputNmber,
            pass,
            close,
            auditPassRate,
            machinePassRate,
            refuse,
            waitAudit
          } = res.data
          this.statisticsData = {
            ...this.statisticsData,
            registrationNumber,
            inputNmber,
            newInputNmber,
            oldInputNmber,
            auditPassRate,
            machinePassRate,
            pass,
            close,
            refuse,
            waitAudit,
          }
        }
      })
    },
    // 获取未结清数据
    todayNotSettleData() {
      return todayNotSettleData(this.params).then(res => {
        if (res.code === 1) {
          const {unexpiredSettle, unexpiredSettleAmount, unexpiredDefer} = res.data
          this.statisticsData = {...this.statisticsData, unexpiredSettle, unexpiredSettleAmount, unexpiredDefer,}
        }
      })
    },
    // 获取入催数据
    todayOverdueData() {
      return todayOverdueData(this.params).then(res => {
        if (res.code === 1) {
          const {
            newOverdue,
            overdueSettle,
            overduePartRefund,
            overdueNotRefund,
            newOverdueAmount,
            overdueSettleAmount,
            overduePartRefundAmount,
            settleAmount,
            settle,
            overdueNotRefundAmount
          } = res.data
          this.statisticsData = {
            ...this.statisticsData,
            settleAmount,
            settle,
            newOverdue,
            overdueSettle,
            overduePartRefund,
            overdueNotRefund,
            newOverdueAmount,
            overdueSettleAmount,
            overduePartRefundAmount,
            overdueNotRefundAmount,
          }
        }
      })
    },
    // 获取打款数据
    todayPayData() {
      return todayPayData(this.params).then(res => {
        if (res.code === 1) {
          const {newPay, newPayAmount, oldPay, pay, payAmount, oldPayAmount, waitPay, waitPayAmount} = res.data
          this.statisticsData = {
            ...this.statisticsData,
            newPay,
            newPayAmount,
            oldPay,
            pay,
            payAmount,
            oldPayAmount,
            waitPay,
            waitPayAmount
          }
        }
      })
    },
    rateChange() {
      const {settleOverdueRate, deferSettleOverdueRate} = this.statisticsData
      if (settleOverdueRate >= 0 || deferSettleOverdueRate >= 0) {
        this.$set(this.statisticsData, 'settleOverdueRate', (100 - settleOverdueRate).toFixed(2))
        this.$set(this.statisticsData, 'deferSettleOverdueRate', (100 - deferSettleOverdueRate).toFixed(2))
      }
    },
    // 获取应还数据
    todayShouldData() {
      return todayShouldData(this.params).then(res => {
        if (res.code === 1) {
          const {
            expireRefund,
            expireRefundAmount,
            defer,
            expireShould,
            expireShouldAmount,
            deferSettleOverdueRate,
            settleOverdueRate,
            expireWait,
            expireWaitAmount
          } = res.data
          this.statisticsData = {
            ...this.statisticsData,
            expireRefund,
            expireRefundAmount,
            defer,
            expireShould,
            expireShouldAmount,
            expireWait,
            expireWaitAmount,
            deferSettleOverdueRate,
            settleOverdueRate,
          }
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>

.flex_center {
  display: flex;
  align-items: center;
}

.is_center {
  text-align: center;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.refresh_rotate {
  animation: rotate 1.2s linear infinite;
}

.should_text {
  color: #999999;
  margin-left: 15px;
  font-size: 12px;
}

.col_item {
  padding: 10px 0;

  .item_icon {
    width: 38px;
    height: 38px;
  }

  .value {
    color: #181818;
    font-weight: bold;
    font-size: 18px;
  }

  .text {
    margin-top: 3px;
    font-size: 13px;
    color: #5A5C61;
  }
}

.rate_box {
  height: 110px;
  padding: 0 15px;

  .pass_rate_icon {
    height: 30px;
    width: 30px;
  }

  .rate_active {
    color: #48AEFC;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
  }

  .rate_text {
    color: #666666;
    text-align: center;
    font-size: 11px;
  }
}

::v-deep .el-card__header {
  //background-color: #FFFBF5;
  //border-bottom: 0;
}
</style>
